<template>
	<div class='qr' @click='closeQr'>
        <div @click.stop='prev' style='width:230px;height:400px;padding:10px 15px;margin:50px auto;box-shadow:0 0 10px white;'>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div v-for='(val,index) in 4' :key='index'  class="swiper-slide">
                        <p style='padding:25px 0;font-size:17px;text-align:center;color:white;'>客服1 &nbsp;<a style='color:white;' href="tel:18875027068">(点击拨打电话)</a></p>
                        <div style='height:180px;padding:25px 0;border-top:1px solid white;border-bottom:1px solid white;'>
                            <div style='width:180px;height:180px;margin:auto;'>
                                <img src="../../static/img/qr.jpg" width="100%" height='100%' >
                            </div>
                        </div>
                        <div style='height:80px;color:white;font-size:17px;line-height:60px;text-align:center;' >
                            kljkljjkjlkjljk
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
        data(){
            return ({
                font:[
                    '世界就是那么美好',
                    '你所经历的仅仅只是占时的',
                    '天空很美哦'
                ]
            });
        },
		methods:{
			closeQr(){
				this.$emit('closeQr');
			},
			prev(){},
		},
        mounted(){
            setTimeout(function(){
                new Swiper ('.swiper-container', {
                    autoplay : {
                      delay:3000,
                      disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },
                }); 
                $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
            },300);
          }
	}
</script>

<style>
	.qr{
        position: fixed;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        background: rgba(0,0,0,.7);
        z-index:1;
    }
</style>